<template>
  <view class="container">
    <!-- 头部 -->
    <!-- <view class="fixed-con">
      <statusBar></statusBar>
      <view class="go-back">
        <image src="../../static/go-back.svg" @click="goBack"/>
        <view>心愿单</view>
        <image class="img-hide" src="../../static/brands-search.svg"/>
      </view>
    </view> -->

    <navigationBar title="心愿单"/>

    <!-- 是否清除已售 -->
    <view class="clear">
      <view>已售商品较多,可以选择一键处理</view>
      <view @click="() => delPopupRef.open()">清除已售商品</view>
    </view>

    <!-- 心愿单列表 -->
    <z-paging 
			ref="pagings" 
			v-model="dataList" 
			@query="queryList" 
			:fixed="false" 
			:showScrollbar="false"
			:default-page-size="10"
		>
      <view class="item-list">
        <view class="item" v-for="item in dataList" :key="item.id">
          <view class="item-img">
            <image :src="item.photo"/>
            <image src="../../static/love.svg"/>
          </view>
          <view class="item-new">{{item.fineness}}</view>
          <view class="item-name">{{item.name}} </view>
          <view class="item-price">¥{{ item.price }}</view>
          <view class="sell-out" v-if="item.isSell">
            <view>已售完</view>
          </view>
        </view>
      </view>
		</z-paging>
    <!-- 清除已售弹框 -->
		<uni-popup ref="delPopupRef" type="center">
			<view class="hint">
        <view class="title">提示</view>
        <view class="con">是否从心愿单移出商品</view>
        <view class="btn">
          <view @click="() => delPopupRef.close()">否</view>
          <view @click="clearConfim()">是</view>
        </view>
      </view>
		</uni-popup>
  </view>
</template>

<script setup>
  import { ref, watch, reactive, onMounted, nextTick } from 'vue';  
  import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";	
  import { queryCollect, removeSoldOut } from '@/api/user.js'
	import functions from '@/utils/functions.js'
  import request from '/http/request.js';

  const pagings = ref(null);
	const dataList = ref([]);
  const delPopupRef = ref(null)

  onMounted(() => {
    
  })

  onReachBottom(() => {
    console.log('滚动到底部')
		
	})

	const goBack = () => {
		uni.navigateBack({ delta: 1 })
	}

  //@query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
	const queryList = async (pageNo, pageSize) => {
    let datas = {
      page:pageNo,
      pageSize:pageSize
    }
    try {
      let res = await queryCollect(datas)
      console.log('心愿单列表',res)
      // console.log('functions.formatDollar(item.price)',functions.formatDollar(1200))
      const newRes = res.list
      // const newRes = res.list.map(item => ({...item,newPrice:functions.formatDollar2(item.price)}))
      pagings.value.complete(newRes);
    } catch (error) {
      console.log('error',error)
      pagings.value.complete(false);
    }
	};

  //确认清除已售
  const clearConfim = async () => {
    let res = await removeSoldOut()
    delPopupRef.value.close()
    pagings.value.reload()
  }


</script>

<style lang="scss" scoped>
  .container{
		/* width: 100vw; */
    height: 100%;
		/* height: 100vh; */
		position: fixed;
		top: 0;
		left: 0;
    background-color: #FFFFFF;
		/* overflow: hidden; */
		/* display: flex;
		flex-direction: column; */

    .fixed-con {
      background-color: white;
      .go-back{
        width: 750rpx;
        height: 90rpx;
        padding:0 30rpx;
        box-sizing: border-box;
        @include flex(row,space-between,center);
        image{
          width: 40rpx;
          height: 40rpx;
        }
        view{
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }
        .img-hide{
          opacity: 0;
        }
      }
    }

    .clear{
      width: 706rpx;
      height: 88rpx;
      background: #E7FFFD;
      padding: 0 24rpx 0 20rpx;
			padding-top: calc(var(--status-bar-height) + 90rpx);
      // box-sizing: border-box;

      @include flex(row,space-between);

      >view:nth-child(1){
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #0A1211;
      }
      >view:nth-child(2){
        width: 208rpx;
        height: 48rpx;
        background: #16DFF2;
        border-radius: 4rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        @include flex(row);
      }
    }

    ::v-deep .z-paging-content-full{
      // flex:1 !important;
      height: calc(100% - var(--status-bar-height) - 178rpx) !important;
      box-sizing: border-box;
      
    }

    ::v-deep .zp-paging-container{
      padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .item-list{
      @include flex(row,space-between,flex-start,wrap);
      /* padding-bottom: calc(var(--status-bar-height) + 178rpx); */
    }

    .item{
      width: 374rpx;
      height: 432rpx;
      background: linear-gradient( 164deg, #FFFFFF 0%, #F8F8F8 100%);
      margin-bottom: 2rpx;
      position: relative;

      .item-img{
        width: 374rpx;
        height: 276rpx;
        background: rgba(255,255,255,0);
        position: relative;

        >image:nth-child(1){
          width: 100%;
          height: 100%;
        }
        >image:nth-child(2){
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          top: 24rpx;
          right: 24rpx;
        }
      }

      .item-new{
        width: 70rpx;
        height: 30rpx;
        border: 1rpx solid #FE485B;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #FE475B;
        text-align: center;
        line-height: 30rpx;
        margin:12rpx 0 10rpx 22rpx;
      }

      .item-name{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        padding:0 22rpx;
        margin-bottom: 20rpx;
        @extend %text-overflow;
      }

      .item-price{
        font-family: Roboto, Roboto;
        font-weight: 600;
        font-size: 22rpx;
        color: #111111;
        margin-left: 22rpx;
      }

      .sell-out{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.15);
        position: absolute;
        top: 0;
        left: 0;
        @include flex();

        view{
          width: 120rpx;
          height: 120rpx;
          border-radius: 60rpx;
          background: #FFFFFF;
          font-family: AppleSystemUIFont;
          font-size: 24rpx;
          color: #222222;
          line-height: 120rpx;
          text-align: center;
        }
      }
    }

    .hint{
      width: 596rpx;
      height: 304rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      padding-top: 40rpx;

      .title{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        margin: auto;
        text-align: center;
      }

      .con{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        text-align: center;
        margin: 40rpx 0 60rpx 0;
      }

      .btn{
        width: 374rpx;
        height: 64rpx;
        margin:auto;
        @include flex(row,space-between);

        view{
          width: 172rpx;
          height: 64rpx;
          border-radius: 32rpx;
          border: 2rpx solid #ADADAD;
          box-sizing: border-box;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ADADAD;
          line-height: 64rpx;
          text-align: center;
        }
        view:nth-child(2){
          border: none;
          background: #16DFF2;
          color: white;
        }
      }
    }

  }

</style>